<template>
  <div class="footer-desc book-content">
    <div class="copyright-content">
      <div class="copyright">© 2002-2019 Kongfz.com 孔夫子旧书网 版权所有</div>
      <div class="links">
        <router-link
          class="link-item"
          v-for="item in friendshipLink"
          :key="item.path"
          :to="{path: item.path}">
          {{ item.title }}
        </router-link>
      </div>
    </div>
    <div class="supervise-links">
      <template
        v-for="item in superviseLinks">
        <a
          :key="item.title"
          class="supervise-item"
          v-if="item.text === 'text'"
          href="javascript:;"
          :class="[item.icon ? `iconfont ${item.icon}` : '']">
          {{ item.title || ""}}
        </a>
        <a
          :key="item.title"
          class="supervise-item"
          v-if="item.type === 'link'"
          :href="item.href"
          target="_blank"
          :class="[item.icon ? `iconfont ${item.icon}` : '']">
          {{ item.title || ""}}
        </a>
        <a
          :key="item.title"
          class="supervise-item"
          v-else
          href="javascript:;"
          :class="[item.icon ? `iconfont ${item.icon}` : '']">
          {{ item.title || ""}}
        </a>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'footerDesc',
  data () {
    return {
      friendshipLink: [
        { title: '关于孔网', path: '/about' },
        { title: '联系我们', path: '/contactUs' },
        { title: '帮助中心', path: '/help' },
        { title: '版权隐私', path: '/copyright' },
        { title: '广告业务', path: '/advice' },
        { title: '工作机会', path: '/work' },
        { title: '移动版', path: '/mobile' },
        { title: '图书目录', path: '/catalog' },
        { title: '图书标签', path: '/tags' }
      ],
      superviseLinks: [
        { title: '京ICP证041501号 ', type: 'text' },
        { title: '京公网安备 11010502035846号', type: 'link', icon: 'icon-beian', href: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502035846' },
        { title: '出版物经营许可证', type: 'link', href: 'http://www.kongfz.com/view/image/chubanwu.jpg' },
        { title: '企业营业执照', type: 'link', href: 'http://www.kongfz.com/view/image/yingyezhizhao.jpg' },
        { title: '违法和不良信息举报电话：010-64755951， 举报邮箱 shenhe@kongfz.com', type: 'text' }
      ]
    }
  }
}
</script>

<style lang="scss" scope>
  .footer-desc {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    border-top: 1px solid #E0E0E0;
    .copyright-content {
      display: flex;
      flex-direction: row;
      font-size: 12px;
      color: #AFAFAF;
      .links {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex: 1;
        .link-item {
          color: inherit;
          text-decoration: none;
          transition: 0.3s;
          &:hover {
            color: #333333;
          }
        }
        .link-item + .link-item {
          margin-left: 10px;
        }
      }
    }
    .supervise-links {
      font-size: 12px;
      margin-top: 10px;
      .supervise-item {
        color: #AFAFAF;
        text-decoration: none;
        &:not([href='javascript:;']) {
          color: #AFAFAF;
          &:hover {
            color: #5D5D5D;
          }
        }
        &.iconfont {
          font-size: inherit;
        }
        & + .supervise-item {
          margin-left: 10px;
        }
      }

    }
  }
</style>
